<template>

  <div>
    <van-nav-bar title="开始充电" left-text="返回" left-arrow @click-left="onClickLeft" />
  </div>
  <van-image src="http://tianwc.oss-cn-beijing.aliyuncs.com/dev/20241122/1732244890605.png" />

  <div class="main-div">
    <div class="left-div" style="border-right:0px solid white;width: 130px;margin: 5px;">
      <span style="font-size: 12px;">站点名称</span>
      <div style="margin-top: 8px;font-size: 18px;font-weight: bold;">{{stationName}} </div>
    </div>
    <div class="centter-div" style="border-right:0px solid white;width: 130px;margin: 5px;">
      <span style="font-size: 12px;">终端设备编号</span>
      <div style="margin-top: 8px;font-size: 18px;font-weight: bold;">{{gunNo}} </div>
    </div>
    <div class="right-div" style="border-right:0px solid white;width: 130px;margin: 5px;">
      <span style="font-size: 12px;">终端功率</span>
      <div style="margin-top: 8px;font-size: 18px;font-weight: bold;">{{gunPower}} Kw</div>
    </div>
  </div>
  <div class="foot-div">
    <span><van-button round type="success" size="normal" @click="startCharging()">开始充电</van-button></span>
  </div>

</template>
<script setup>
import router from '@/router'
import {GetGunById} from "@/api/station";

const onClickLeft = () => history.back();

import { useRoute } from 'vue-router';
import {ref} from "vue";

const route = useRoute();

const gunId = route.query.gunId;

const gunNo = ref('');
const stationName = ref('');
const gunPower = ref('');


initData();
function initData() {
  GetGunById(gunId).then(res => {
    if(res.data.code === 200000){
      gunNo.value = res.data.data.gunNo;
      stationName.value = res.data.data.stationName;
      gunPower.value = res.data.data.gunPower;
    }
  })
}
function startCharging() {
  console.log(gunNo.value);
  router.push({
    path: '/charging/starting',
    query: {gunNo: gunNo.value}
  });
} 
</script>
<style>
.main-div {
  margin: 8px;
  height: 65px;
  width: auto;
  display: flex;
  border-radius: 2%;
  background-color: black;
  color: white;
}

image {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
}

.foot-div {
  text-align: center;
}
</style>